import React, {Component, useState, useEffect} from 'react';
import {Radar, RingProgress} from '@ant-design/plots';
import {Button, Card, Col, Form, Input, Row, Space} from "antd";
import ScoreLineCharts from "@/pages/dashboard/components/ScoreLineCharts";
import SchoolLists from "@/pages/dashboard/components/SchoolLists";
import useAuthModel from "@/models/useAuthModel";
import Demo20 from "@/pages/dashboard/Progress/Demo20";
import '../font.css'
import Demo9 from "@/pages/dashboard/Progress/Demo9";
import Demo22 from "@/pages/dashboard/Progress/Demo22";

const DemoRadar = (props) => {
  const data = props.data
  const config = {
    data,
    width: 230,
    height: 320,
    padding: 50,
    legend: false,
    xField: 'item',
    yField: 'score',
    seriesField: 'user',
    meta: {
      score: {
        alias: '分数',
        min: 0,
        max: 100,
      },
    },
    xAxis: {
      line: null,
      tickLine: null,
      grid: {
        line: {
          style: {
            lineDash: null,
          },
        },
      },
    },
    // 开启面积
    area: {},
    // 开启辅助点
    point: {
      size: 2,
    },
    yAxis: {
      label: {
        style: {
          fontSize: 12
        }
      }
    },
    xAxis: {
      label: {
        style: {
          fontSize: 16
        }
      }
    },
  };
  return <Radar {...config} />;
};
const SearchModule = (props) => {

  const {onFilterName} = props

  return (
    <Form
      name="basic"
      layout="inline"
      labelCol={{span: 8}}
      wrapperCol={{span: 16}}
      initialValues={{remember: true}}
      onFinish={(values) => {
        onFilterName(values.keyword)
      }}
      autoComplete="off"
    >
      <Space>
        <Form.Item
          name="keyword"
        >
          <Input style={{width: 163}} name="searchValue" placeholder="请输入关键字"/>
        </Form.Item>
        <Button
          type="primary"
          htmlType="submit"
        >
          搜索
        </Button>
        <Button
          type="default"
          onClick={() => {
            onFilterName("")
          }}
        >
          全部
        </Button>
      </Space>
    </Form>
  )
}

const m = 20
const n = 100

class RadarCharts extends Component {
  state = {
    school: {
      name: "南昌大学-材料科学与工程",
      code: "0001",
      data: [
        {
          name: '国家级产教融合平台',
          star: parseInt(Math.random()*(n-m)+m),
        },
        {
          name: '省部级产教融合平台',
          star: parseInt(Math.random()*(n-m)+m),
        },
        {
          name: '国家级咨政研究',
          star: parseInt(Math.random()*(n-m)+m),
        },
        {
          name: '省部咨政研究',
          star: parseInt(Math.random()*(n-m)+m),
        },
        {
          name: '社会服务',
          star: parseInt(Math.random()*(n-m)+m),
        },
      ],
    },
    paper: [
      {"school":"2014","jour_level": "顶级期刊","paper":150},
      {"school":"2014","jour_level": "重要期刊","paper":170},
      {"school":"2014","jour_level": "其他期刊","paper":180},

      {"school":"2015","jour_level": "顶级期刊","paper":50},
      {"school":"2015","jour_level": "重要期刊","paper":90},
      {"school":"2015","jour_level": "其他期刊","paper":140},

      {"school":"2016","jour_level": "顶级期刊","paper":100},
      {"school":"2016","jour_level": "重要期刊","paper":70},
      {"school":"2016","jour_level": "其他期刊","paper":80},

      {"school":"2017","jour_level": "顶级期刊","paper":90},
      {"school":"2017","jour_level": "重要期刊","paper":105},
      {"school":"2017","jour_level": "其他期刊","paper":80},

      {"school":"2018","jour_level": "顶级期刊","paper":110},
      {"school":"2018","jour_level": "重要期刊","paper":120},
      {"school":"2018","jour_level": "其他期刊","paper":115},

      {"school":"2019","jour_level": "顶级期刊","paper":70},
      {"school":"2019","jour_level": "重要期刊","paper":150},
      {"school":"2019","jour_level": "其他期刊","paper":100},

      {"school":"2020","jour_level": "顶级期刊","paper":80},
      {"school":"2020","jour_level": "重要期刊","paper":120},
      {"school":"2020","jour_level": "其他期刊","paper":130},

      {"school":"2021","jour_level": "顶级期刊","paper":60},
      {"school":"2021","jour_level": "重要期刊","paper":100},
      {"school":"2021","jour_level": "其他期刊","paper":120},
    ],
    filterName: "",
  }

  handleSchoolFilter = (schoolName: string) => {
    this.setState({filterName: schoolName})
  }

  handleSchoolChange = (schoolName: string) => {
    const {school, paper} = this.state
    school.name = schoolName
    for (let i = 0; i < school.data.length; i++) {
      school.data[i].star = parseInt(String(Math.random() * (50 - 100) + 100))
    }
    for (let i = 0; i < paper.length; i++) {
      paper[i].paper = parseInt(String(Math.random() * (50 - 100) + 100))
    }
    this.setState({school: school, paper: paper})
  }

  render() {
    return (
      <>
        <Space direction="vertical" size="middle" style={{display: 'flex'}}>
          {/*学科进展表格2样式*/}

          <Card title="智库建设情况" bordered={false}>
            <Row gutter={24}>
              <Col span={6}>
                <Card title="论文发表统计">
                  <Demo22 data={this.state.paper}/>
                </Card>
              </Col>
              <Col span={12}>
                <Card title={this.state.school.name}>
                  <Demo9 data={this.state.school.data}/>
                </Card>
              </Col>
              <Col span={6}>
                <Space direction="vertical" size="middle" style={{display: 'flex'}}>
                  <SchoolLists pageSize={8} filterName={this.state.filterName} onSchoolChange={this.handleSchoolChange}/>
                </Space>
              </Col>
            </Row>
          </Card>

          {/*<Card title="一流学科综合考评" bordered={false}>*/}
          {/*  <Row gutter={24}>*/}
          {/*    <Col span={6}>*/}
          {/*      <Space direction="vertical" size="middle" style={{display: 'flex'}}>*/}
          {/*        <SchoolLists filterName={this.state.filterName} onSchoolChange={this.handleSchoolChange}/>*/}
          {/*      </Space>*/}
          {/*    </Col>*/}
          {/*    <Col span={8}>*/}
          {/*      <Card headStyle={{fontWeight: 'bold'}} className='finish' title={this.state.school.name } size="small" bordered={true}*/}
          {/*            style={{marginBottom: 10}}>*/}
          {/*        <DemoRadar data={this.state.school.data}/>*/}
          {/*      </Card>*/}
          {/*    </Col>*/}
          {/*    <Col span={10}>*/}
          {/*      <Card headStyle={{fontWeight: 'bold'}} className='finish' title={this.state.school.name } size="small" bordered={true}*/}
          {/*            style={{marginBottom: 10}}>*/}
          {/*        <Demo20 data={this.state.student}/>*/}
          {/*      </Card>*/}
          {/*    </Col>*/}
          {/*    /!*<Col span={8}>*!/*/}
          {/*    /!*  <Space direction="vertical" size="middle" style={{display: 'flex'}}>*!/*/}
          {/*    /!*    <ScoreLineCharts/>*!/*/}
          {/*    /!*  </Space>*!/*/}
          {/*    /!*</Col>*!/*/}
          {/*  </Row>*/}
          {/*</Card>*/}
        </Space>
      </>
    );
  }
}

export default RadarCharts;
